<template>
  <div class="attr-item">
    <div class="attr-item-label">
      <span>{{ title }}</span>
    </div>
    <div class="attr-item-value">
      <Button class="attr-item-setting" @click="methods.onOpen">
        点击配置
      </Button>
    </div>

    <Modal
      v-model:open="isSetting"
      title="配置条件"
      @ok="methods.onConfirm"
      :body-style="{ height: '580px', overflow: 'auto' }"
      width="1000px"
    >
      <div class="setting-body">
        <Filter :options="options" v-model:condition="curEditContent" />
      </div>
    </Modal>
  </div>
</template>

<script lang="ts">
import { PropType, computed, defineComponent, ref } from 'vue'
import { Button, Modal } from 'ant-design-vue'

import { cloneDeep } from 'lodash-es'

import Filter from '../filter/index.vue'
import { BwFilterTableFilterConditionModel } from '../filter/model'
import { BwFilterTableTreeListFieldsModel } from '../model'

export default defineComponent({
  name: 'BwDesignFilterTableCondition',
  components: { Button, Modal, Filter },
  props: {
    options: {
      type: [Array] as PropType<BwFilterTableTreeListFieldsModel[]>,
    },
    value: {
      type: [Array] as PropType<BwFilterTableFilterConditionModel[]>,
    },
    title: {
      type: [String],
      default: '条件',
    },
  },
  emits: ['update:value', 'change'],
  setup(props, { emit }) {
    /** 对象值 */
    const curResult = computed({
      get: (): BwFilterTableFilterConditionModel[] => {
        return props.value ?? []
      },
      set: (value) => {
        emit('update:value', value)
        emit('change', value)
      },
    })

    /** 当前编辑内容 */
    const curEditContent = ref<BwFilterTableFilterConditionModel[]>([])

    /** 是否配置 */
    const isSetting = ref(false)

    const methods = {
      onOpen() {
        curEditContent.value = cloneDeep(curResult.value ?? [])
        isSetting.value = true
      },
      onConfirm() {
        curResult.value = curEditContent.value
        isSetting.value = false
      },
    }

    return { curEditContent, methods, isSetting }
  },
})
</script>

<style lang="less" scoped>
.attr-item {
  display: flex;
  align-items: center;
  padding: 8px;

  .attr-item-label {
    width: 90px;
    text-align: left;
  }

  .attr-item-value {
    flex: 1;

    .attr-item-setting {
      width: 100%;
    }
  }
}

.setting-body {
  padding: 24px;
}
</style>
